import React, {Component} from 'react';
import cssModule from './Setting.module.less'

import {NavBar, Icon, Button} from 'antd-mobile';
import {RemoveCookie} from '../../redux/LogicalOperation'

class Setting extends Component {
    onBack = () => this.props.history.goBack()
    onLogOut = ()=>{
        this.props.history.replace('/Login')
        RemoveCookie('token')
    }

    render() {
        return (
            <div className={`${cssModule.content}`}>
                {/*导航条*/}
                <NavBar
                    mode="light"
                    icon={<Icon type="left"/>}
                    onLeftClick={() => this.onBack()}
                    rightContent={[
                        <Icon key="1" type="ellipsis"/>,
                    ]}
                >设置</NavBar>

                <div className="paddlr14">
                    <div className='flex just-spa-bet ali-cen paddtb26'>
                        <section className='flex ali-cen'>
                            {/*<span className='iconfont fo-20 mr10'>&#xe7d1;</span>*/}
                            <span>账号与绑定</span>
                        </section>
                        <section className='flex ali-cen'>
                            {/*<span className='fo-12 fo-shadowgray'>添加视频简历</span>*/}
                            <span className={`iconfont fo-20  ${cssModule.iconfont}`}>&#xe743;</span>
                        </section>
                    </div>
                    <div className='flex just-spa-bet ali-cen paddtb26'>
                        <section className='flex ali-cen'>
                            {/*<span className='iconfont fo-20 mr10'>&#xe780;</span>*/}
                            <span>通知与提醒</span>
                        </section>
                        <section className='flex ali-cen'>
                            <span className='fo-12 fo-shadowgray'></span>
                            <span className={`iconfont fo-20  ${cssModule.iconfont}`}>&#xe743;</span>
                        </section>
                    </div>
                    <div className='flex just-spa-bet ali-cen paddtb26'>
                        <section className='flex ali-cen'>
                            {/*<span className='iconfont fo-20 mr10'>&#xe7c6;</span>*/}
                            <span>隐私设置</span>
                        </section>
                        <section className='flex ali-cen'>
                            {/*<span className='fo-12 fo-shadowgray'>您有新的待完善事项</span>*/}
                            <span className={`iconfont fo-20  ${cssModule.iconfont}`}>&#xe743;</span>
                        </section>
                    </div>
                    <div className='flex just-spa-bet ali-cen paddtb26'>
                        <section className='flex ali-cen'>
                            {/*<span className='iconfont fo-20 mr10'>&#xe781;</span>*/}
                            <span>打招呼</span>
                        </section>
                        <section className='flex ali-cen'>
                            <span className='fo-12 fo-shadowgray'></span>
                            <span className={`iconfont fo-20  ${cssModule.iconfont}`}>&#xe743;</span>
                        </section>
                    </div>
                    <div className='flex just-spa-bet ali-cen paddtb26'>
                        <section className='flex ali-cen'>
                            {/*<span className='iconfont fo-20 mr10'>&#xe781;</span>*/}
                            <span>薪资模式设置</span>
                        </section>
                        <section className='flex ali-cen'>
                            <span className='fo-12 fo-shadowgray'></span>
                            <span className={`iconfont fo-20  ${cssModule.iconfont}`}>&#xe743;</span>
                        </section>
                    </div>
                    <div className='flex just-spa-bet ali-cen paddtb26'>
                        <section className='flex ali-cen'>
                            {/*<span className='iconfont fo-20 mr10'>&#xe781;</span>*/}
                            <span>帮助与反馈</span>
                        </section>
                        <section className='flex ali-cen'>
                            <span className='fo-12 fo-shadowgray'></span>
                            <span className={`iconfont fo-20  ${cssModule.iconfont}`}>&#xe743;</span>
                        </section>
                    </div>
                    <div className='flex just-spa-bet ali-cen paddtb26'>
                        <section className='flex ali-cen'>
                            {/*<span className='iconfont fo-20 mr10'>&#xe781;</span>*/}
                            <span>版本更新</span>
                        </section>
                        <section className='flex ali-cen'>
                            <span className='fo-12 fo-shadowgray'></span>
                            <span className={`iconfont fo-20  ${cssModule.iconfont}`}>&#xe743;</span>
                        </section>
                    </div>
                    <div className='flex just-spa-bet ali-cen paddtb26'>
                        <section className='flex ali-cen'>
                            {/*<span className='iconfont fo-20 mr10'>&#xe781;</span>*/}
                            <span>切换身份</span>
                        </section>
                        <section className='flex ali-cen'>
                            <span className='fo-12 fo-shadowgray'></span>
                            <span className={`iconfont fo-20  ${cssModule.iconfont}`}>&#xe743;</span>
                        </section>
                    </div>

                </div>
                <Button className={`${cssModule.btn}`} onClick={()=>this.onLogOut()}>退出登录</Button>
            </div>
        );
    }
}

export default Setting;